<div class="data-filter-container">
  <div class="data-filter-options">
    <ul class="data-filter-options-icon">
      <li *ngFor="let option of dataFilterOptions">
        <a (click)="toggleDataFilterOption(option, $event)"
           [ngClass]="{
            'btn': true,
            'btn-sm': true,
            'btn-info': option.selected,
            'btn-default': !option.selected
           }"
           title="Click to see {{option.name}}"
        >
          {{option.name}}
        </a>
      </li>
    </ul>
  </div>

  <div
    class="data-filter-group-selection"
    appClickOutside (clickOutside)="showGroups = false"
  >
    <!--Group selection button-->
    <button
      class="btn btn-outline-secondary btn-sm data-filter-group-btn"
      (click)="toggleDataFilterGroupList($event)"
    >
      <span>{{ selectedGroup?.name || 'Select'}}</span>
      <span><img src="assets/icons/arrow-down.png" alt=""></span>
    </button>

    <!--Group selection list-->
    <div
      class="data-filter-group-panel"
      *ngIf="showGroups"
    >
      <div class="panel-body data-filter-group-panel-body">
        <input
          type="search"
          class="form-control form-control-sm"
          placeholder="Search"
          [(ngModel)]="querystring">
        <ul class="data-filter-group-list">
          <li
            *ngFor="let item of dataGroups | filterByName: querystring"
          ><a (click)="setSelectedGroup(item, scrollse, $event)">{{ item.name }}</a></li>
        </ul>
      </div>
    </div>
    <!--end of Group selection list-->
  </div>

  <div class="data-filter-list-search">
    <input type="text" class="form-control form-control-sm" (focus)="showBody = true" (keyup)="searchChanged()" placeholder="Search" [(ngModel)]="listchanges">
  </div>

  <div class="data-filter-available-header">
    <span>Available ({{(availableItems | filterByName:listchanges).length}})</span>
    <a (click)="selectAllItems($event)">&raquo;</a>
  </div>
  <div class="data-filter-selected-header">
    <a (click)="deselectAllItems($event)">&laquo;</a>
    <span>Selected ({{(selectedItems$ | async).length }})</span>
  </div>


  <div class="data-filter-available-body">
    <ul #scrollse>
      <li *ngIf="loading">Loading...</li>
      <li *ngIf="!loading && (availableItems | filterByName:listchanges).length == 0"><a>No items</a></li>
      <li *ngFor="let item of availableItems | filterByName:listchanges |  paginate: { id: 'foo',itemsPerPage: 25, currentPage: p }"
          [ngClass]="{'hiddenTree': inSelected(item, selectedItems)}"
          title="Click to select item"
          id="{{item.id | addUnderscore}}"
      >
        <a (click)="addSelected(item, $event)">{{ item.name }}</a>
      </li>

      <li *ngIf="(availableItems | filterByName:listchanges).length >= 25">
        <a>
          <pagination-controls  id="foo"
                                (pageChange)="p = $event"
                                maxSize="0">
          </pagination-controls>
        </a>
      </li>
    </ul>
  </div>

  <div class="data-filter-selected-body">
    <ul>
      <li *ngFor="let item of selectedItems$ | async | paginate:{id: 'selectedlist',itemsPerPage: 100, currentPage: k}"
          style="cursor: move"
          dnd-droppable (onDropSuccess)="transferDataSuccess($event,item)"
          title="click to unselect item"
      >
        <a
          dnd-draggable
          [dragEnabled]="true"
          (click)="removeSelected(item, $event)"
          [dragData]="item"
          class="{{item.hasOwnProperty('programType') ? 'auto-growing' : ''}}"> {{ item.name }} </a>
      </li>
      <li *ngIf="(selectedItems$ | async).length > 100">
        <pagination-controls id ='selectedlist' maxSize="0" (pageChange)="k = $event"></pagination-controls>
      </li>
    </ul>
  </div>
</div>

<div class="data-filter-btns">
  <div>
    <button class="btn btn-outline-secondary btn-sm" (click)="emit($event)">Update</button>
    <button class="btn btn-outline-secondary btn-sm" (click)="close($event)">Close</button>
  </div>
</div>
